<template>
  <el-menu
      active-text-color="#409BFF"
      background-color="#606266"
      text-color="#fff"
      :router="true"
      :unique-opened="true"
  >
      <el-menu-item index="/home">
<!--        <el-icon>-->
<!--          <User></User>-->
<!--        </el-icon>-->
        <el-icon><OfficeBuilding /></el-icon>
        首页
      </el-menu-item>

  <el-sub-menu index="1">
    <template #title>
<!--      <el-icon><location /></el-icon>-->
      <el-icon><Avatar /></el-icon>
      <span>系统管理</span>
    </template>
    <el-menu-item-group>
      <el-menu-item index="/user">
<!--        <el-icon>-->
<!--          <User></User>-->
<!--        </el-icon>-->
        <el-icon><UserFilled /></el-icon>
        用户管理
      </el-menu-item>
      <el-menu-item index="/role">
<!--        <el-icon>-->
<!--          <User></User>-->
<!--        </el-icon>-->
        <el-icon><Monitor /></el-icon>
        角色管理
      </el-menu-item>
      <el-menu-item index="/authority">
<!--        <el-icon>-->
<!--          <User></User>-->
<!--        </el-icon>-->
        <el-icon><Setting /></el-icon>
        权限管理
      </el-menu-item>
    </el-menu-item-group>
  </el-sub-menu>

    <el-sub-menu index="2">
      <template #title>
<!--        <el-icon><location /></el-icon>-->
        <el-icon><WalletFilled /></el-icon>
        <span>财务管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/order">
<!--          <el-icon>-->
<!--            <User></User>-->
<!--          </el-icon>-->
          <el-icon><Coin /></el-icon>
          订单管理
        </el-menu-item>
        <el-menu-item index="/bill">
<!--          <el-icon>-->
<!--            <User></User>-->
<!--          </el-icon>-->
          <el-icon><Money /></el-icon>
          账单管理
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
  <el-menu-item index="/customer">
        <el-icon>
          <User></User>
        </el-icon>
        客户管理
      </el-menu-item>
    <el-sub-menu index="3">
      <template #title>
<!--        <el-icon><location /></el-icon>-->
        <el-icon><Van /></el-icon>
        <span>运输管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/driver">
          <el-icon><PhoneFilled /></el-icon>
          司机管理
        </el-menu-item>
        <el-menu-item index="/line">
          <el-icon><Location /></el-icon>
          路线管理
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="4">
      <template #title>
        <el-icon><HomeFilled /></el-icon>
        <span>仓储管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/goods">
          <el-icon><Goods /></el-icon>
          货物管理
        </el-menu-item>
        <el-menu-item index="/depository">
          <el-icon><MostlyCloudy /></el-icon>
          仓库管理
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
        <el-menu-item index="/package">
          <el-icon><Box /></el-icon>
          包装管理
        </el-menu-item>
  </el-menu>

</template>

<script setup>
import {User} from '@element-plus/icons-vue'
import {House} from "@element-plus/icons";
</script>

<style scoped>
el-menu{
  border-right: none;
}
</style>